<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单和图片</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body  style="margin: 50px">
<!--表单-->
<!--基本格式-->
<form>
    <div class="form-group">
    <label>电子邮件</label>
    <input type="email" class="form-control" placeholder="请输入你的电子邮箱">
    </div>
    <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" placeholder="请输入你的密码">
    </div>
</form>

<!--内联表单-->
<form class="form-inline">
    <div class="form-group">
        <label>电子邮件</label>
        <input type="email" class="form-control" placeholder="请输入你的电子邮箱">
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="请输入你的密码">
    </div>
</form>

<!--表单合组-->
<div class="input-group">
<div class="input-group-addon">¥</div>
<input type="text" class="form-control" placeholder="请输入你的价格">
<div class="input-group-addon">.00</div>
</div>

<!--水平排列-->
<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10">
        <input type="email" class="form-control" placeholder="请输入你的电子邮箱">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
        <input type="password" class="form-control" placeholder="请输入你的密码">
        </div>
    </div>
</form>

<!--复选框和单选框-->
    <!--设置复选框,在一行-->
<div class="checkbox">
    <label>
        <input type="checkbox">体育
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox">音乐
    </label>
</div>

<!--设置禁用的复选框-->
<div class="checkbox disabled">
    <label>
        <input type="checkbox" disabled>体育
    </label>
</div>

<!--设置内联一行显示的复选框-->
<label class="checkbox-inline">
    <input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
        <input type="checkbox" disabled>音乐
</label>

<!--设置单选框  和复选框用法一样,把checkbox改成radio 就行-->

<!--设置下拉列表-->
<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

<!--校验状态 has-error,has-success等-->

<!--添加额外的图标-->
<!--文本框右侧内置文本图标-->
<div class="form-group has-feedback">
    <label>电子邮件</label>
    <input type="email" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

<div class="form-group has-feedback">
    <label>电子邮件</label>
    <input type="email" class="form-control">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>

<div class="form-group has-feedback">
    <label>电子邮件</label>
    <input type="email" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

<!--大小-->
<input type="password" class="form-control" input-lg>
<input type="password" class="form-control" >
<input type="password" class="form-control" input-sm>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>